<template>
  <el-table
    v-if="type=='multiple'"
    ref="multiTable"
    :data="data"
    :key="tableKey"
    :height="height"
    :max-height="maxHeight"
    :border="border"
    size="medium"
    @select="manualChangeClick"
    @select-all="manualChangeClick"
    @selection-change="changeClick"
  >
    <slot
      v-if="expandEmpty"
      slot="empty"
      name="empty"
    ></slot>
    <el-table-column
      type="selection"
      width="40"
    ></el-table-column>
    <slot></slot>
  </el-table>
  <el-table
    v-else-if="type=='single'"
    ref="singleTable"
    :highlight-current-row="true"
    :data="data"
    :key="tableKey"
    :height="height"
    :max-height="maxHeight"
    :border="border"
    size="medium"
    @select="manualChangeClick"
    @select-all="manualChangeClick"
    @current-change="changeClick"
  >
    <slot
      v-if="expandEmpty"
      slot="empty"
      name="empty"
    ></slot>
    <slot></slot>
  </el-table>
  <el-table
    v-else
    :data="data"
    :key="tableKey"
    :height="height"
    :max-height="maxHeight"
    :border="border"
    size="medium"
  >
    <slot
      v-if="expandEmpty"
      slot="empty"
      name="empty"
    ></slot>
    <slot></slot>
  </el-table>
</template>

<script>
import anyfishUI from "../../index";
export default {
  name:"mm-table",
  props: {
    data: {// 数据
      type: Array,
      default: null
    },

    type: {// null、single、multiple
      type: String,
      default: null
    },

    selectCondition: {// 对应single、multiple，判断每一行是否为选中状态的函数，返回true则为选中状态、false则为未选状态
      type: Function,
      default: null
    },

    height: {// 高度，单位px，不传则自适应
      type: Number,
      default: null
    },

    maxHeight: {// 最大高度，单位px，不传则自适应
      type: Number,
      default: null
    },

    border: {// 是否加上列之间的竖线
      type: Boolean,
      default: true
    },

    expandEmpty: {// 是否扩展无数据时的显示
      type: Boolean,
      default: false
    }
  },

  computed: {
    tableKey() {
      return this.height + "-" + this.maxHeight;
    }
  },

  watch: {
    data() {
      if (this.type == "multiple") {
        this.selectMultiple();
      } else if (this.type == "single") {
        this.selectSingle();
      }
    },

    selectCondition() {
      if (this.type == "multiple") {
        this.selectMultiple();
      } else if (this.type == "single") {
        this.selectSingle();
      }
    }
  },

  mounted() {
    if (this.type == "multiple") {
      this.selectMultiple();
    } else if (this.type == "single") {
      this.selectSingle();
    }
  },

  methods: {
    selectMultiple() {
      if (this.data && this.selectCondition) {
        this.$nextTick().then(() => {
          this.data.forEach(item => {
            this.$refs.multiTable.toggleRowSelection(item, this.selectCondition(item));
          });
        }).catch(reason => {
          anyfishUI.api.log(reason);
        });
      }
    },

    selectSingle() {
      if (this.data && this.selectCondition) {
        for (let i = 0; i < this.data.length; i++) {
          let item = this.data[i];
          if (this.selectCondition(item)) {
            this.$refs.singleTable.setCurrentRow(item);
            return;
          }
        }
      }
    },

    manualChangeClick(selectData) {
      this.$emit("manualChange", selectData);// 单选时返回单个对象，多选时返回多个对象的数组
    },

    changeClick(selectData) {
      this.$emit("change", selectData);// 单选时返回单个对象，多选时返回多个对象的数组
    }
  }
}
</script>